<template>
  <div class="taskAll-wrap">
      <div class="tool-box"> 筛选条件：<el-select size="small" v-model="value" placeholder="任务状态">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>

            <el-select size="small" v-model="value" placeholder="任务类型">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>

            <el-select size="small" v-model="value" placeholder="筛选">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>

            <el-input size="small" placeholder="请输入内容" class="input-with-select" style="width:200px">
               <el-button slot="append" icon="el-icon-search"></el-button>
             </el-input>

            <el-button type="primary" size="small">重置条件</el-button>
            <el-button type="primary" @click="task_add()" size="small">+ 新增任务</el-button>
    
      </div>
      <div class="taskall-content">
        <el-table :data="tableData" style="width: 100%"
        @cell-mouse-enter="tableMouseEnter"
        @cell-mouse-leave="tableMouseLeave"
        @row-click="tableRowClick">
          <el-table-column
          type="selection"
          width="55">
        </el-table-column>

        <el-table-column
          label="编号" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.taskId }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="发起人" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="任务类型" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">每日任务</span>
          </template>
        </el-table-column>

        <el-table-column
          label="标记" width="80">
          <template slot-scope="scope">
            <span style="margin-left: 10px" v-if="scope.row.taskStatus===1" class="iconfont icon-chaosong"></span>
            <span style="margin-left: 10px"  v-else-if="scope.row.taskStatus===2" class="iconfont icon-xietong"></span>
            <span style="margin-left: 10px"  v-else-if="scope.row.taskStatus===3" class="iconfont icon-faburenwu"></span>
            <span style="margin-left: 10px" v-else-if="scope.row.taskStatus===4" class="iconfont icon-zhuanfa"></span>
          </template>
        </el-table-column>

        <el-table-column label="任务说明"  prop="procDesc">
        </el-table-column>

        <el-table-column
          label="任务进度" width="200">
          <template slot-scope="scope">
            <span><el-progress :percentage="80"></el-progress></span>
          </template>
        </el-table-column>

          <el-table-column
            label="发布时间"
            width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime }}</span>
              <div class="handlebox" v-if="(tableIndex === scope.row.taskId)">
                <i title="完成" class="iconfont icon-wancheng" @click.stop="task_finish(scope.row.taskId)"></i>
                <i title="标记" class="iconfont icon-biaojijiaohu" @click.stop="task_sign(scope.row.taskId)"></i>
                <i title="延时" class="iconfont icon-yanshi" @click.stop="task_delay(scope.row.taskId)"></i>
                <i title="删除" class="iconfont icon-shanchu" @click.stop="task_del(scope.row.taskId)"></i>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <transition name="fade">
        <taskAdd-dialog
        v-if="AddDialogVisible"
        :AddDialogVisible.sync="AddDialogVisible"
        :templateData="templateData"
        :onSubmit="add_taskSubmit">
      </taskAdd-dialog>
      </transition>

      <transition name="fade">
        <task-dialog
        v-if="taskDialogVisible"
        :taskDialogVisible.sync="taskDialogVisible">
      </task-dialog>
      </transition>

  </div>
</template>
<script>
// import slideDialog from './components/slide.vue'
import taskAddDialog from '@/components/task-dialog/task_add.vue'
import taskDialog from '@/components/task-dialog/task_dialog.vue'

export default {
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      tableData: [ {
            "createTime": "2017-12-26 14:58:20",
            "name": "Single",
            "nodeId": 492,
            "procDesc": "搜集A片区域的使用量",
            "procInstanceId": 75,
            "procName": "三角环",
            "progress": 20,
            "taskId": 232,
            "taskStatus": 1,
            "username": "李开复--运营部"
        },
        {
           "createTime": "2017-12-26 14:58:20",
           "name": "Single",
           "nodeId": 492,
           "procDesc": "搜集b片区域的使用量",
           "procInstanceId": 75,
           "procName": "三角循环",
           "progress": 20,
           "taskId": 233,
           "taskStatus": 2,
           "username": "崔莺莺"
       },{
          "createTime": "2017-12-26 14:58:20",
          "name": "Single",
          "nodeId": 492,
          "procDesc": "搜集c片区域的使用量",
          "procInstanceId": 75,
          "procName": "循环",
          "progress": 20,
          "taskId": 235,
          "taskStatus": 3,
          "username": "西厢记"
      },
      {
         "createTime": "2017-12-26 14:58:20",
         "name": "Single",
         "nodeId": 492,
         "procDesc": "搜集d片区域的使用量",
         "procInstanceId": 75,
         "procName": "循环",
         "progress": 20,
         "taskId": 236,
         "taskStatus": 4,
         "username": "dhh记"
     },
     {
        "createTime": "2017-12-26 14:58:20",
        "name": "Single",
        "nodeId": 492,
        "procDesc": "真功夫",
        "procInstanceId": 75,
        "procName": "循环",
        "progress": 20,
        "taskId": 237,
        "taskStatus": 5,
        "username": "ook"
    },
    {
       "createTime": "2017-12-26 14:58:20",
       "name": "Single",
       "nodeId": 492,
       "procDesc": "进行中",
       "procInstanceId": 75,
       "procName": "循环",
       "progress": 20,
       "taskId": 238,
       "taskStatus": 6,
       "username": "dhh记"
   }],
        tableIndex:'',
        AddDialogVisible:false,
        taskDialogVisible:false,
        dialogType:'',
        templateData:''
    }
  },
  methods:{
    handleDelete(){
      alert(3)
    },
    tableMouseEnter(row, column, cell, event){
        this.tableIndex = row.taskId;
    },
    tableMouseLeave(){
        this.tableIndex = ""
    },
    tableRowClick(row, event, column){
      this.taskDialogVisible= true;
      // if(row.taskStatus === 4){   // 进行中
      //   this.AddDialogVisible = true;
      //   this.prposData = row;
      //   this.dialogType = "dialog-taskOngoing";
      // }
    },
    task_finish(val){
        this.$confirm('确认已完成任务吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          alert("好的")
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
    },
    task_sign(){
    },
    task_delay(){
    },
    task_del(){
      this.$confirm('确认删除该任务吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        alert("好的")
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    task_add(){
        this.AddDialogVisible= true;
    },
    get_template(){
        let params = {
          "data": {},
          "url": "/procdef/queryTaskList"
        }
         this.$post("/taskInfo/getRaskInfo",params,data => {
            console.log("请求的模板数据成功了");
            this.templateData = data.data;
           },error => {
             console.log(error);
         });
    },
    add_taskSubmit(procDefId){//添加任务提交
      let params = {
        "data": {
          "procDefId": procDefId
        },
        "url": "/custom/preSetView"
      }
      this.$post("/taskInfo/getRaskInfo",params,data => {
         console.log("请求的数据成功了");
         // console.log(data);
        },error => {
          console.log("请求出错");
      });
    }
  },
  components:{
    taskAddDialog,
    taskDialog
  },
  created(){
    this.get_template()
  }
}
</script>
<style scoped lang="scss">
  @import "./task.scss";  // 任务列表的样式
  .fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
  }
  .fade-enter, .fade-leave-to {
  opacity: 0;
  }
</style>
